<template>
 <div>
    <el-button v-show="showBtn" :type="edit=='编辑'?'info':'success'" size="mini" :class="edit!='编辑'?'xinzen':(isShow ? 'bianji' :'bianji1')  " :disabled="isShow" style="margin: 10px 10px" @click="dialogVisible = true">
      
      <i class="el-icon-plus" v-if="edit=='新增'"></i>
      <i class="el-icon-edit" v-else></i>
      {{edit}}
    
    </el-button>
        <el-dialog
            :title="edit=='编辑'?'修改客户档案':'新增客户档案'"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <!-- 插入form -->

                <el-form :model="editData" :rules="rules" :style="{marginLeft:'50px'}">
                    <el-form-item label="客户姓名" prop="name" >
                        <el-input :style="{width:'200px'}" v-model="editData.name"></el-input>
                    </el-form-item>
                    
                    <el-form-item :label="'电\xa0\xa0\xa0\xa0\xa0\xa0\xa0话'" prop="phone">
                        <el-input   :style="{width:'200px'}" v-model="editData.phone"></el-input>
                    </el-form-item>

                    <el-form-item   :label="'性\xa0\xa0\xa0\xa0\xa0\xa0\xa0别'" prop="sex">
                        <el-select :style="{width:'200px'}" v-model="editData.sex" placeholder="请选择性别">
                          <el-option label="男" value="1"></el-option>
                          <el-option label="女" value="0"></el-option>
                          <el-option label="保密" value="2"></el-option>

                        </el-select>
                    </el-form-item>
                </el-form>


            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click=add v-if="edit=='新增'">确 定</el-button>
                 <el-button type="primary" @click=updateC v-else>修改</el-button>
            </span>
    </el-dialog>
</div>
</template>
<script>
import {updateCustomer,addCustomer} from '@/request/api'    
  export default {
    props:{
      showBtn:{
        type:Boolean,
        default:true
      },
      edit:{
        type:String,
        default:'新增'
      },
       editData:{
            type:Object,
            default: ()=>{
              return {
                id:null,
                name:'',
                phone:'',
                sex:null,
                inputUserId:null,
                inputUserName:null
            }
            }
        }
    },
    data() {
      return {
         isShow:false,
        dialogVisible: false,
        rules:{
           name: [
            { required: true, message: '请输入名字', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请正确输入', trigger: 'blur' }
          ],
          sex: [
            {  required: true, message: '请选择性别', trigger: 'change' }
          ],
        }
       
      };
    },
    methods: {


  async updateC(){
      let res = await updateCustomer(this.editData)
      if(!res) return 
       console.log(res);
      this.dialogVisible = false
      if(res.code!=200){
         this.$message.error(res.msg)
      }else{
          this.$message.success(res.msg)
      }
     
     
      },
     async add(){
      let res = await addCustomer({...this.editData})
      if(!res) return 
     
       console.log(res);
      this.dialogVisible = false
       if(res.code!=200){
         this.$message.error(res.msg)
      }else{
          this.$message.success(res.msg)
      }
     
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

<style lang='less' scoped>

  .xinzen{
    background: #e8f4ff;
    border: 1px solid  #a3d3ff;
    color: #1890ff;
    &:hover{
      background-color: #1890ff;
      color: white;
    }
  }
    .bianji{
    background: #e7faf0;
    border: 1px solid  #d0f5e0;
    color: #71e2b4;
    &:hover{
          background: #e7faf0;
          border: 1px solid  #d0f5e0;
          color: #71e2b4;
    }
  }
   .bianji1{
    background: #e7faf0;
    border: 1px solid  #d0f5e0;
    color: #71e2b4;
    &:hover{
      background-color: #13ce66;
      color: white;
    }
  }

</style>